<template>
  <div class="footer">
    <div class="first">
      <div class="one">
      <span>热门导航</span>
      <p @click="toTop()">网站首页</p>
      <p @click="toFLower()">爱情鲜花</p>
      <p @click="toCart">看购物车</p>
      <p>全部商品</p>


    </div>
    <div class="two">
      <span>客户服务</span>
      <p>关于我们</p>
      <p>售后服务</p>
      <p>隐私条款</p>
      <p>服务说明</p>

    </div>
    <div class="three">
      <span>联系我们</span>
      <p>意见反馈</p>
      <p>工作时间：07:00-23:00</p>
      <p>7*24小时在线订购</p>
      <p>全国热线：400-000-0000</p>
    </div>
    </div>
    <div class="copyRight">

<p class="p1">Copyright&#169; 2024 XXX. All rights reserved.</p>
<p>豫ICP备********号-*</p>

    </div>

  </div>
</template>

<script>
export default {
  methods:{
    toTop(){
      //后期可实现平滑效果
      document.documentElement.scrollTop = 0;
      
    },
    toFLower(){
      this.$router.push({ path: '/flowers' }).catch(err=>err)
    },
    toCart(){
      this.$router.push({path:"/cart"}).catch(err=>err)
    }
  }
}
</script>

<style lang="scss">
.footer{
  margin-top: 20px;
  background-color: #ffffff;
  height: 300px;
  
  .first{
    display: flex;
  flex-wrap: wrap;
  span{
    font-weight: 700;
    color: #333340;
  }
  }
  .copyRight{
    padding-top: 50px;
    height: 200px;
    background-color: #f5f5f5;
    .p1{
      color: #999999;
      
    }
    p{
      font-size: 20px;
      margin-top: 20px;
    }
  }
  .one, .two , .three{
    width: 33%;
    // border: 1px solid black;
    text-align: center;
    font-size: 30px;
    color: #999999;
    p:hover{
      cursor: pointer;
      text-decoration-line: underline;
      color: #9f755a;

    }
  }
}

</style>